<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i
			><span>出库</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header>
		<div class="common-box">
            <div class="content-box">
                <v-scan
                @scanData="scanData"
                ref="ch"
                :switchScan="switchScan"
                :loadingData="loadingData"
                ></v-scan>
            </div>
		</div>
		<!-- <div class="address">
			<p  style="font-size: 16px; line-height: 38px;margin-left: 5px;">至库位：</p>
			<input type="text" v-model="toLoc" placeholder="请输入库位" >
		</div> -->
		<div class="order-list">
			<div v-for="(item, index) in orderList" :key="index">
				<!-- <div class="order-box"> -->
					<div class="orderNo"><span>单号:&nbsp; </span>{{ item.omsNo }}</div>
					<div class="order-item">
						<div><span>子单号:&nbsp; </span>{{ item.productNo }}</div>
					</div>
					<!-- <div class="order-item">
						<div><span>库位:&nbsp; </span>{{ item.loc }}</div>
					</div> -->
					<!-- <div class="btn">
						<div class="del" @click="delOrderInfo(index)">删除</div>
					</div> -->
				<!-- </div> -->
			</div>
			<div v-if="orderList.length == 0" class="no-data">暂无数据</div>
		</div>
		<!-- <div class="footer-btn" @click="confirmEnter">确认</div> -->
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import Header from '@/components/header'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery"
	import { iatRecorder } from '@/utils/iatRecorder'
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
			'v-scan': Scan,
      'v-header': Header,
		},
		data() {
			return {
				toLoc: '',
				orderList: [],
				loadingData: false,
				fetchObj,
				responseData: {},
				switchScan: true,
			}
		},
		watch: {
		},
		mounted() {
			this.onPlusReady('e') // 获取APP经纬度
			// try {
			// 	CallAndroidOrIOS.ContinuousScan();
			// } catch (error) {}
		},
		created() {},
		methods: {
			delOrderInfo (index) {
				this.orderList.splice(index,1)
			},
			// 扫描后-- 出库、移库查询库位信息
			scanData(data) {
				if (data.length < 11) {
					this.$alert('子单不能小于11位数,请重新扫描', '提示', {
					confirmButtonText: '确定'
					})
					return
				}
				let that = this;
				let params = {
					"gps": {
						"latitude": this.$store.state.latitude,
						"longitude": this.$store.state.longitude, 
						"address": this.$store.state.CurrentLocation,
						"city": this.$store.state.CurrentCity,
						"districict": this.$store.state.CurrentDistrict
					},
					'labelNo': data,
				}
				this.orderList = []
				this.httpRequest1('post', ' /system/wms/chuKuScanQueryAndSure', params).then(res => {
					if(res.success) {
						that.orderList = res.data
						that.$message({
							message: res.message,
							type: 'success'
						});
						if (!res.data.length) {
							CallAndroidOrIOS.TipAudio();
						}
					} else {
						that.$alert('暂无信息!', '提示', {
						confirmButtonText: '确定',
						})
					}
				}) 
				// let postData = {
				// 	labelNo: data, // 单号
				// 	"gps": {
				// 		"latitude": this.$store.state.latitude,
				// 		"longitude": this.$store.state.longitude, 
				// 		"address": this.$store.state.CurrentLocation,
				// 		"city": this.$store.state.CurrentCity,
				// 		"districict": this.$store.state.CurrentDistrict
				// 	},
				// };
				// this.orderList = []
				// this.httpRequest1('post', '/system/wms/queryChuKuAndYiKuScan', postData).then(res => {
				// if(res.success) {
				// 	that.orderList.unshift(res.data)
				// 	if (!res.data.productNo) {
				// 		CallAndroidOrIOS.TipAudio();
				// 	} else {
						// that.confirmEnter(res.data)
				// 	}
				// } else {
				// 	that.$alert('暂无信息!', '提示', {
				// 	confirmButtonText: '确定',
				// 	})
				// }
				// })
			},
			// 关闭扫描框
			closeScan() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: "离开app原生半屏扫描二维码/条码",
				});
			} catch (error) {}
			},
			//打开或关闭 闪光灯
			flashOpenOrClose() {
			let that = this;
			// 安卓
			try {
				if (that.ifflash) {
				CallAndroidOrIOS.setTorchEnabled_false(); // setTorchEnabled_false  闪光灯 关闭
				that.ifflash = false;
				} else {
				CallAndroidOrIOS.setTorchEnabled_true(); // setTorchEnabled_true  闪光灯 打开
				that.ifflash = true;
				}
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '打开或关闭闪光灯',
				});
			} catch (error) {}
			},
			// 关闭扫码框
			CloseScanBox() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '离开app原生半屏扫描二维码/条码',
				});
			} catch (error) {}
			},
			goPrev() {
				this.closeScan()
				this.$router.go(-1);
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	// @import "../../components/publicLess.less";
	.common-box {
		height: 100%;
	}
	.Abnormal {
		font-size: 28/50rem;
		.el-dialog {
			z-index: 9999;
			 
		}
		/deep/ .el-dialog__header {
			padding: 0;
		}
		/deep/ .el-dialog__headerbtn {
			top: 2px;
			right: 5px;
		}
		/deep/ .el-dialog__body {
			padding: 20px 10px;
		}
	}
	.address {
		margin: 10/50rem;
		font-size: 32/50rem;
	}
	.tab {
		display: flex;
		margin-top: 20px;
		font-size: 20px;
		div {
			width: 50%;
			line-height: 26/50rem;
			padding-bottom: 10px;
			text-align: center;
			border-bottom: 2px solid #e1e1e1;
		}
		.active {
			color: #038EEA;
			border-color: #038EEA;
		}
	}
	.scan-label {
		.scan-label-item {
			margin: 10/50rem;
			border: 1px solid #e1e1e1;
			padding: 20/50rem 10/50rem;
			color: #9B9B9B;
			font-size: 32/50rem;
			.time-person {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10/50rem;
			}
			.selectAddress {
				margin-bottom: 10/50rem;
			}
			span {
				color: #000;
			}
		}
	}
	.abnormal-list {
		.abnormal-list-item {
			margin: 10/50rem;
			border: 1px solid #e1e1e1;
			padding: 20/50rem 10/50rem;
			color: #9B9B9B;
			font-size: 32/50rem;
			.time-person {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10/50rem;
			}
			span {
				color: #000;
			}
			.time-person2 {
				display: flex;
				margin-bottom: 10/50rem;
				.left {
					width: 260/50rem;
				}
			}
		}

	}
	.address {
		margin-top: 10px;
		display: flex;
		input {
			flex: 1;
			border: none;
			line-height: 37px;
			height:37px;
			padding-left: 10/50rem;
			box-sizing: border-box;
			outline: none;
			border: 1px solid #e1e1e1;
		}
	}
	.order-box {
		margin: 5px;
		border: 1px solid #e1e1e1;
		padding: 5px 10px;
		line-height: 23px;
		.orderNo {
			border-bottom: 1px solid #e1e1e1;
		}
		.order-item {
			display: flex;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	.btn {
		display: flex;
		justify-content: right;
		margin-top: 3px;
		.del {
			width: 20%;
			background-color: red;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	.order-list {
		margin: 10px;
		div {
			font-size: 22px;
			span {
				color: #6f7180;
			}
		}
		.no-data {
			text-align: center;
			margin-top: 80px;
			color: #6f7180;
		}
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
	}
</style>